{extend name="layout/layout"}
{block name="content"}
<main class="user_page  ">
    <section class="">
        <div class="layui-main">
            <div class="user_con">
                <div class="user_headpage" data-load="active_header">
                    {include file="user_activity/header" menu="role" /}
                </div>
                <div class="right_main ">

                    <p class="ft24 mb10 ft-bold">共管人設定</p>
                    <p class="ft14 gary_c9 mb20 ft-bold">該主辦身份中，新增或調整所有活動的主辦共管人。 金星以上主辦擁有最多5位共管者</p>
                    <div class="block_com">
                       <from class="layui-form">
  
                          <div class="ticket_ul2 ar_table">
                             <table class="layui-table tac" lay-skin="nob">
                                <colgroup>
                                   <col>
                                   <col width="180">
                                   <col width="180">
                                   <col width="180">
                                   <col width="180">
                                </colgroup>
                                <thead>
                                   <tr>
                                      <th></th>
                                      <th>
                                         <div class="tac">主辦管理</div>
                                      </th>
                                      <th>
                                         <div class="tac">活動管理</div>
                                      </th>
                                      <th>
                                         <div class="tac">共管人設定</div>
                                      </th>
                                      <th>
                                         <div class="tac">參加人電話</div>
                                      </th>
                                   </tr>
                                </thead>
                                <tbody>
                                 {volist name="user_list" id="vo"} 
                                    <tr data-uid="{$vo.id}">
                                       <td>
                                          <div class=" item1">
                                             <div class="user_img">
                                                <img src="{$vo.profile !='' ? $vo.profile : "_ROOT__/public/activity/images/user3.png"}">
                                             </div>
                                             <div>
                                                <p class="ft-bold">{$vo.name}</p>
                                                <p class="ft12 gar_c6">{$vo.email}</p>
                                             </div>
                                          </div>
                                       </td>
                                       <td><i data-btn="select"  {if $pid == $vo.id} data-status="disabled" {/if} 
                                             class="iconfont icon-noselect {if in_array(1,$vo.roles) || $pid == $vo.id}icon-selected{/if} ft40"></i></td>
                                       <td><i data-btn="select"  {if $pid == $vo.id} data-status="disabled" {/if} 
                                             class="iconfont icon-noselect {if in_array(2,$vo.roles) || $pid == $vo.id }icon-selected{/if} ft40"></i></td>
                                       <td><i data-btn="select" {if $pid == $vo.id} data-status="disabled" {/if} 
                                             class="iconfont  icon-noselect {if in_array(3,$vo.roles)|| $pid == $vo.id}icon-selected{/if} ft40"></i></td>
                                       <td><i data-btn="select"  {if $pid == $vo.id} data-status="disabled" {/if} 
                                             class="iconfont icon-noselect {if in_array(4,$vo.roles) || $pid == $vo.id}icon-selected{/if}  ft40"></i></td>
                                    </tr>
                                 {/volist}
                                   
                                   <tr class="addRole">
                                      <td>
                                         <!-- <a href="/activity/user/active_role_add.html"  class=" item1"> -->
                                          <a href="#"  share-data-dialog="signup"  class=" item1">
                                          <!-- <a href="#"    data-dialog1="signup" style="cursor: pointer;display: flex;"  class="item1"></a> -->
                                            <div class="user_img">
                                               <img src="__ROOT__/public/activity/images/add.jpg">
                                            </div>
                                            <div>
                                               <p class="ft-bold orange_c">新增</p>
                                            </div>
                                         </a>
                                      </td>
                                      <td><i data-btn="select" class="iconfont icon-noselect ft40"></i></td>
                                      <td><i data-btn="select" class="iconfont icon-noselect ft40"></i></td>
                                      <td><i data-btn="select" class="iconfont icon-noselect ft40"></i></td>
                                      <td><i data-btn="select" class="iconfont icon-noselect ft40"></i></td>
                                   </tr>
                                </tbody>
                             </table>
                          </div>
                          <div class=" d-flex jc-fe al-c mt40">
  
                             <button class="layui-btn layui-bg-orange next-btn " id="saveButton">储存</button>
  
                          </div>
                       </from>
                    </div>
                 </div>
            </div>
        </div>
    </section>
</main>
<div class="head_dialog_share" style="display: none;">
   <div class=" active_w register-form" data-name="signup">
       <div class="text-align-center  ft-blod mb70">
           <p class="ft24 mb20">注册</p>
           <p class="ft14 gary_c9">會員可享各項專屬權益： 票券隨身帶著走、即時管理真方便、追蹤主辦方最新動態、掌 握第一手活動資訊</p>
       </div>
       <div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
           <div class="demo-login-container">
               
               <div class="layui-form-item" style="margin-bottom:0.1rem;">
                   <p class="label">邮箱账号</p>
                   <div class="layui-input-wrap">
                       <input type="text" name="email" value="" lay-verify="required" placeholder="请输入邮箱"
                              lay-reqtext="请输入邮箱" autocomplete="off" class="layui-input email-input"
                              lay-affix="clear">
                   </div>
               </div>
               <div class="layui-form-item" style="margin-bottom:0.1rem;">
                  <p class="label">验证编码
                      <button class="layui-btn-primary layui-border-orange layui-btn-sm email-code-send-btn"
                              style="float:right;cursor:pointer" title="发送邮箱验证邮件">
                          发送
                      </button>
                  </p>
                  <div class="layui-input-wrap">
                      <input type="text" name="email_check_code" value="" lay-verify="required"
                             placeholder="请输入您收到邮箱验证邮件中编码"
                             lay-reqtext="请输入您的验证编码" autocomplete="off" class="layui-input" lay-affix="clear">
                  </div>
              </div>
               <div class="layui-form-item" style="margin-bottom:0.1rem;">
                  <p class="label">姓名</p>
                  <div class="layui-input-wrap">
                     <input type="text" name="name" value="" lay-verify="required" placeholder="请输入姓名"
                           lay-reqtext="请输入您的邮箱" autocomplete="off" class="layui-input email-input"
                           lay-affix="clear">
                  </div>
              </div>
               <input type="hidden" name="pid" value="{$pid|default=0}">
               
               <div class="layui-form-item" style="margin-bottom:0.1rem;">
                   <p class="label">登录密码</p>
                   <div class="layui-input-wrap">
                       <input type="password" name="password" value="" lay-verify="required" placeholder="请输入您的密码"
                              lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
                   </div>
               </div>
               <div class="layui-form-item" style="margin-bottom:0.1rem;">
                   <p class="label">密码确认</p>
                   <div class="layui-input-wrap">
                       <input type="password" name="password_confirm" value="" lay-verify="required"
                              placeholder="请再次输入密码"
                              lay-reqtext="请重复密码" autocomplete="off" class="layui-input" lay-affix="eye">
                   </div>
               </div>
               <div class="layui-form-item" style="margin-bottom:0.1rem;">
                   <p class="label">手机号码</p>
                   <div class="layui-input-wrap">
                       <input name="phone" value="" lay-verify="required"
                              placeholder="请输入您的手机号码" lay-reqtext="请填写" autocomplete="off" class="layui-input"
                       >
                   </div>
               </div>
               <input type="hidden" name="type" value="register">

               <div class="layui-form-item" style="margin-bottom:0.1rem;">
                   <button class="layui-btn layui-btn-fluid layui-bg-orange" lay-submit
                           lay-filter="demo-login">注册
                   </button>
               </div>
               <hr>
               
           </div>
       </div>

   </div>
</div>
<script>
           //登录注册
         $(document).on('click', '[share-data-dialog]', function () {
            var temp = $(this).attr('share-data-dialog')
            layui.layer.closeAll()
            closeBtn = 1;
            if (temp == 'login' || temp == 'signup') {
                closeBtn = 0
            }
            layui.use(function () {
                var $ = layui.$;
                var layer = layui.layer;
                var util = layui.util;
                var form = layui.form;
                layer.open({
                    type: 1,
                  //   area: '350px',
                    resize: false,
                    shadeClose: true,
                    title: false,
                    closeBtn: closeBtn,
                  //   skin: temp + '_dialog',
                    content: $('.head_dialog_share'),
                    success: function (elem, index) {
                        // 对弹层中的表单进行初始化渲染
                        form.render();
                        // 表单提交事件
                        form.on('submit(demo-login)', function (data) {
                            var field = data.field; // 获取表单字段值
                            var roles = []; // 定义一个数组来保存当前用户的权限
                           // 遍历当前行中的权限按钮
                           $('.addRole i[data-btn="select"]').each(function(index) {
                              var icon = $(this);
                              // 如果按钮有 'icon-selected' 类，则表示用户有这个权限
                              if (icon.hasClass('icon-selected')) {
                                 roles.push(index + 1); // 将权限编号（1, 2, 3, 4）添加到数组
                              }
                           });
                           if(roles.length <=0) {
                              return layui.layer.msg('权限不得为空');
                           }
                           field.roles = roles;
                            if (field.type === 'register') {
                                    $.quickPost('{:url("/register")}', field).done((res) => {
                                    layer.closeAll();
                                    location.reload();
                                })
                            }
                            return false; // 阻止默认 form 跳转
                        });
                    }
                });
            });
        })
     $(document).on('click', '[data-btn="select"]', function () {
      var disabled = $(this).attr('data-status')
      // var role_type = $(this).data('type')
      // $(this).attr('data-role',role_type)
      if (disabled == 'disabled') {
         return;
      }
      $(this).toggleClass('icon-selected')
   })

   $(document).ready(function() {
    // 保存按钮的点击事件监听器
    $('#saveButton').click(function() {
        // 定义一个数组来保存用户权限数据
        var userRoles = [];
        
        // 遍历所有表格行
        $('tr[data-uid]').each(function() {
            var row = $(this); // 当前行
            var uid = row.attr('data-uid'); // 获取用户id
            var roles = []; // 定义一个数组来保存当前用户的权限
            
            // 遍历当前行中的权限按钮
            row.find('i[data-btn="select"]').each(function(index) {
                var icon = $(this);
                // 如果按钮有 'icon-selected' 类，则表示用户有这个权限
                if (icon.hasClass('icon-selected')) {
                    roles.push(index + 1); // 将权限编号（1, 2, 3, 4）添加到数组
                }
            });
            
            // 将用户uid和权限数组添加到userRoles数组中
            userRoles.push({
                uid: uid,
                role: roles
            });
        });
         if(userRoles.length == 0) {
            layui.layer.msg('至少要选择一个权限');
         }
        // 将userRoles数组转换为JSON字符串
        var data = JSON.stringify(userRoles);
        // 使用AJAX提交数据到后端
        $.quickPost('/activity/user/active_role', {data:data}).done(function(){
            location.reload();
        })
    });
});

</script>
{/block}